<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <%@ include file="/commons/basejs.jsp" %>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>关联产品</title>
        <script>

            $(function(){

                $("#relatedProductType").combobox({
                    onSelect :function(){
                        console.log("onSelect");
                        if($("#relatedProductType").combobox('getValue') == 1){
                            $('#relatedProductDataGrid').datagrid('hideColumn','ord');
                        }else{
                            $('#relatedProductDataGrid').datagrid('showColumn','ord');
                        }
                        relatedProuctSearch();
                    }
                });
            });

            function prouctSearch() {
                var queryParams = {sellerName:$("#autocomplete-ajax-shop-search-p").val(),productName:$("#autocomplete-ajax-product-search-p").val()};

                var options = $("#productDataGrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#productDataGrid").datagrid('options').url = "${path}/product/productList.do";
                $("#productDataGrid").datagrid('options').queryParams = queryParams;
                $("#productDataGrid").datagrid('reload');
            }
            
            function relatedProuctSearch() {
                $("#autocomplete-ajax-shop-search-p").val("");
                $("#autocomplete-ajax-product-search-p").val("");
            }





            function relatedProuctSearch() {
                var queryParams = {};

                var select = $("#productDataGrid").datagrid("getSelected");
                if (select == null) {
                    queryParams.productId ="";
                    $.messager.alert("提示", "请先选择产品！", "info");
                    return ;
                }else{
                    queryParams.productId =select.id;
                }
                queryParams.searchType = $("#relatedProductType").combobox('getValue');
                queryParams.shopNameSearch = $("#autocomplete-ajax-shop-search").val();
                queryParams.productNameSearch =$("#autocomplete-ajax-product-search").val();
                var options = $("#relatedProductDataGrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#relatedProductDataGrid").datagrid('options').url = "${path}/relatedProduct/relatedProductList.do";
                $("#relatedProductDataGrid").datagrid('options').queryParams = queryParams;
                $("#relatedProductDataGrid").datagrid('reload');
            }

            function resetRelatedProuctSearch() {
                $("#relatedProductType").combobox("setValue","0");
                $("#autocomplete-ajax-shop-search").val("");
                $("#autocomplete-ajax-product-search").val("");
                relatedProuctSearch();
            }


            //左侧点击事件
            function onClickProduct(index, row) {
                console.log(row.id);
//                    loadSpecialDataGrid(row.id)
                relatedProuctSearch();
            }

            //操作单元格
            function formatedit (value, row, index){
                var datatype = $("#relatedProductType").combobox('getValue');
                var  str = '';
                if(datatype == 0){
                    <shiro:hasPermission name="/relatedProduct/operation.do">
                    str = str+$.formatString( '<font color="red" onclick="editRelated('+row.id+','+datatype+');" >删除</font>');
                    </shiro:hasPermission>
                }else{
                    <shiro:hasPermission name="/relatedProduct/operation.do">
                    str = str+$.formatString( '<font  color="green" onclick="editRelated('+row.id+','+datatype+');" >添加</font>');
                    </shiro:hasPermission>
                }
                return str;
            }

            function formatOrd (value, row){
                console.log("value:"+value);
                if(value == null ){
                    return "<font color='green'>输入</font>";
                }else{
                    return value;
                }
            }

            function editRelated(relatedProductId, dataType) {
                console.log("editRelated:"+dataType);
                var classrow = $("#productDataGrid").datagrid('getSelected');
                if (dataType == 0){
                    $.messager.confirm('询问', '您确定要删除此关联吗?', function (b) {
                        if (b) {
                            $.ajax({
                                type: "POST",dataType: "JSON",
                                url:"/relatedProduct/operation.do",
                                data: {productId:classrow.id,dataType:dataType,relatedProductId:relatedProductId},
                                async : false,
                                success: function(data){
                                    relatedProuctSearch();
                                }
                            });
                        }
                    });
                }else{
                    $.ajax({
                        type: "POST",dataType: "JSON",
                        url:"/relatedProduct/operation.do",
                        data: {productId:classrow.id,dataType:dataType,relatedProductId:relatedProductId},
                        async : false,
                        success: function(data){
                            relatedProuctSearch();
                        }
                    });
                }

            }



           
            $.extend($.fn.datagrid.methods, {
                editCell: function(jq,param){
                    return jq.each(function(){
                        var opts = $(this).datagrid('options');
                        var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                        for(var i=0; i<fields.length; i++){
                            var col = $(this).datagrid('getColumnOption', fields[i]);
                            col.editor1 = col.editor;
                            if (fields[i] != param.field){
                                col.editor = null;
                            }
                        }
                        $(this).datagrid('beginEdit', param.index);
                        for(var i=0; i<fields.length; i++){
                            var col = $(this).datagrid('getColumnOption', fields[i]);
                            col.editor = col.editor1;
                        }
                    });
                }
            });

            var editIndex = undefined;
            function endEditing(){
                if (editIndex == undefined){return true}
                if ($('#relatedProductDataGrid').datagrid('validateRow', editIndex)){
                    $('#relatedProductDataGrid').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }
            function onClickCell(index, field){
                if (endEditing()){
                    $('#relatedProductDataGrid').datagrid('selectRow', index)
                        .datagrid('editCell', {index:index,field:field});
                    editIndex = index;
                }
            }

            function onAfterEdit(index, row, changes) {
                var classrow = $("#productDataGrid").datagrid('getSelected');
                var updated = $('#relatedProductDataGrid').datagrid('getChanges', 'updated');
                if (updated.length < 1) {
                    editRow = undefined;
                    $('#relatedProductDataGrid').datagrid('unselectAll');
                    return;
                } else {
                    console.log("row.id"+row.id);
                    console.log("row.ord"+row.ord);
                    console.log("发送请求");
                    $.ajax({
                        type: "POST",dataType: "JSON",
                        url:"/relatedProduct/updateOrd.do",
                        data: {productId:classrow.id,relatedProductId:row.id,ord:row.ord},
                        async : false,
                        success: function(data){
                            relatedProuctSearch();
                        }
                    });

                }
            }


        </script>
    </head>
    <body>
    <div class="easyui-layout" fit="true">
        <div data-options="region:'west',split:true,border:false" title="产品列表" style="width:45%;">

            <table id="productDataGrid"class="easyui-datagrid"
                data-options="
                url:'${path}/product/productList.do',
                fit:true,
                idField:'id',
                fitColumns: true,
                rownumbers:true,
                toolbar:'#search_tools_p',
                pagination:true,
                singleSelect:true,
                <%--nowrap:false,--%>
                width:$(this).width() * 0.1,
                onClickRow:onClickProduct
                ">
                <thead>
                <th data-options="field:'id', align:'center'">ID</th>
                <th data-options="field:'sellerName', align:'center',width:150">商家</th>
                <th data-options="field:'productName', align:'center',width:350">产品</th>
                </thead>
            </table>
            <div id="search_tools_p">
                商家:
                <div style="position: relative;display: inline;" >
                    <input type="hidden" name="autocomplete-shop-search" id="autocomplete-shop-search-p" value="" />
                    <input type="text" id="autocomplete-ajax-shop-search-p" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                    <input type="text" id="autocomplete-ajax-x-shop-search-p" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                </div>

                <div style="position: relative;display: inline;margin-left: 200px">
                    产品:
                    <input type="hidden" name="autocomplete-product-search" id="autocomplete-product-search-p" value="" />
                    <input type="text" id="autocomplete-ajax-product-search-p" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                    <input type="text" id="autocomplete-ajax-x-product-search-p" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                </div>

                <div style="position: relative;display: inline;margin-left: 200px">
                    <input type="button" class="easyui-linkbutton " value="重置" onclick="resetProuctSearch();"/>
                    &nbsp;
                    <input type="button" class="easyui-linkbutton" value="搜索" onclick="prouctSearch();"/>
                </div>

            </div>

        </div>
        <div data-options="region:'center',split:true,border:false" title="关联产品列表" style="width:55%;">

            <table id="relatedProductDataGrid" class="easyui-datagrid"
                   data-options="
		   		url:'${path}/relatedProduct/relatedProductList.do',
		   		fit:true,
		   		idField:'id',
		   		fitColumns: true,
		   		rownumbers:true,
		   		toolbar:'#search_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		<%--nowrap:false,--%>
		   		width:$(this).width() * 0.1,
		   		onClickCell:onClickCell,
		   		onAfterEdit:onAfterEdit
		   		">
                <thead>
                <th data-options="field:'id', align:'center'">ID</th>
                <th data-options="field:'sname', width:'70px', align:'center'">商家</th>
                <th data-options="field:'pname', width:'130px',align:'center'">产品</th>
                <th data-options="field:'ord', width:'20px',align:'center',editor:'numberbox',formatter:formatOrd">排序</th>
                <th data-options="field:'action',width:'20px', align:'center',formatter:formatedit">操作</th>


                </thead>
                <div id="search_tools">
                    <select id="relatedProductType"  class="easyui-combobox" data-options="width:115,height:29,editable:false,panelHeight:'auto'">
                        <option value="0">已关联产品</option>
                        <option value="1">未关联产品</option>
                    </select>

                    商家:
                    <div style="position: relative;display: inline;" >
                        <input type="hidden" name="autocomplete-shop-search" id="autocomplete-shop-search" value="" />
                        <input type="text" id="autocomplete-ajax-shop-search" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                        <input type="text" id="autocomplete-ajax-x-shop-search" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                    </div>

                    <div style="position: relative;display: inline;margin-left: 200px">
                        产品:
                        <input type="hidden" name="autocomplete-shop-search" id="autocomplete-product-search" value="" />
                        <input type="text" id="autocomplete-ajax-product-search" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                        <input type="text" id="autocomplete-ajax-x-product-search" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                    </div>

                    <div style="position: relative;display: inline;margin-left: 200px">
                        <input type="button" class="easyui-linkbutton " value="重置" onclick="resetRelatedProuctSearch();"/>
                        &nbsp;
                        <input type="button" class="easyui-linkbutton" value="搜索" onclick="relatedProuctSearch();"/>
                    </div>

                </div>
            </table>

        </div>
    </div>
    </body>
</html>
